<template>
  <div class="vow">
    <div @click="clickVow">我想看</div>
    <div class="vow-form" v-show="showVowForm">
      <div>
        <span>书籍：</span><input type="text" v-model="bookName" placeholder="要看什么书呢？写下来">
      </div>
      <div>
        <span>作者：</span><input type="text" v-model="author" placeholder="同名的太多了，最好可以把作者名也填下">
      </div>
      <button @click="makeAVow">拜托了</button>
    </div>
  </div>
</template>

<script>
import { makeAVow } from '@/api/book.js'

export default {
  data(){
    return {
      bookName: '',
      author: '',
      showVowForm: false
    }
  },
  methods: {
    clickVow() {
      this.showVowForm = !this.showVowForm
    },
    makeAVow() {
      if ( this.bookName === '') {
        alert('书名不能为空！')
        return
      }
      makeAVow(this.bookName, this.author).then( (response) => {
        if ( response.status == 200 ){
          alert('收到')
          return
        }else {
          alert(response.statusText)
        }
      }) 
    }
  }
}
</script>

<style>
.vow-form { 
  display: flex;
  flex-direction: column;
  align-items: baseline;
}
.vow-form input{
  width: 70%;
}
.vow-form div{
  width: 100%;
}
</style>